/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { AtSwipeAction } from "taro-ui"
import { Checkbox } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http, Toast } from '../../../library/func';
import Icon from '../../../project/style/icon';

import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Product extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			list:[],
			selectbar:false,

			is_slectall:false,

			cancelstr:'',

		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		//获取接口数据

		this.getData();		
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		// console.log('onClick: ' + id)
	}

    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
	}


	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	config = {
        navigationBarTitleText: '商品收藏',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }


	//获取数据
	getData = () => {
		DoHttp.Loading({
			url:'collect/list.php',
			success:(res)=>{
				this.setState({
					list:res
				}, ()=>{
					for(var key in this.state.list){
						this.state.list[key]['checked'] = false;
					}
				})
				
			}
		});

	}

	//删除数据
	deleteData(str){
		wx.showModal({
			title: '删除',
			content: '确定取消关注',
			success: (res) => {
			  if (res.confirm) {

				DoHttp.post({
					url:'collect/logic/batchCancel.php',
					data:{
						ids:str
					},
					success:(res)=>{
						this.getData();
						wx.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 2000
						})
	
					}
				});
		
			  } else if (res.cancel) {
				// console.log('用户点击取消')
			  }
			}
		})		  

	}


	//显示底部部
	onSbarshow = (e) =>{

		if(this.state.selectbar){
			this.setState({
				selectbar:false,
			})
			this.selectAll();
		}else{
			this.setState({
				selectbar:true,
			})

		}

	}
	
	//删除提示
	onDelete = (e)=>{
		let arr = [];
		let list = this.state.list;
		for(var key in list){
			if(list[key]['checked'] == true){
				arr.push(list[key]['collect_id']);
			}
		}

		if(arr.length == 0){
			Toast.text('至少选中一项');
			return;
		}

		let str = arr.join(',');

		this.deleteData(str);

	}

	//选中全部
	selectAll = (e)=>{
		let list = this.state.list;

		if(this.state.is_slectall){
			for(var key in list){
				list[key]['checked'] = false;
			}
			this.setState({
				list:list,
				is_slectall:false,
			})	
		}else{
			for(var key in list){
				list[key]['checked'] = true;
			}
			this.setState({
				list:list,
				is_slectall:true,
			})	

		}
	}

	//选择单个
	selectone = (key, e) => {
		let list = this.state.list;
		let checked = this.state.list[key]['checked'];
		let bool_checked = checked? false : true;
		list[key]['checked'] = bool_checked;
		this.setState({
			list:list
		},()=>{
			if(!bool_checked){
				this.setState({
					is_slectall:false,
				})
			}else{
				for(var key in list){
					if(!list[key]['checked']){
						return;
					}
				}	
				this.setState({
					is_slectall:true,
				})	

			}
		})
	}

	//左滑删除
	deleteone = (val, e)=>{
		this.deleteData(val+"");	
	}

	//加入购物车
	subCart(item){
		DoHttp.post({
			url:'cart/logic/add.php',
			data:{
				pid:item.id,
				cid1:item.fk_cid1,
				cid2:item.fk_cid2,
				count:1,
			},
			success:(res) => {
				// console.log('resssssssssssssssss',res)
				Toast.success("添加到购物车");
			},error(err){
				// console.log('errrrrrrrrrrr',err)
				Toast.text(err.msg);
			}
		});
	}


	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		let selectall = this.state.is_slectall ?
		<checkbox checked={true} style='transform: scale(1.6,1.6);'/>
		:
		<checkbox  style='transform: scale(1.6,1.6);' />;


		let btbar = this.state.selectbar ?
		//显示顶部
		<CFooter h='100'>

			<CBetween h="100"  bg='green'>
				<CHand class="f04" x="left" y="center" bg="white" h="100" pl='40' onClick={ this.selectAll.bind(this) }>
					{selectall}
					<CText size="30" mt='13' ml='10'>全选</CText>
				</CHand>
				<CHand class="f06" x="center" y="center" bg="#D53B31" h="100" onClick={ this.onDelete.bind(this) }>
					<CText color="white" size="32">取消关注</CText>
				</CHand>
				
			</CBetween>

		</CFooter>
		:
		//不显示顶部
		<CFooter h='0'>
		</CFooter>;


		let editstr = this.state.selectbar?
		<CText color="#666" size="24">完成</CText>
		:
		<CText color="#666" size="24">编辑</CText>;

		return (
			<CPage>

				<CContent>
					{/* 顶部*/}

					<CBetween style="width:100%"  bg='#fff' h="80">
						<CHand y='center'>
							<CSvg w='36' ml="30" h='35' color='#5e5d5b' icon={Icon.store} />
							<CText ml="20" size="30" color='#5e5d5b'> 每日一达</CText>
						</CHand>
						<CHand>
							<CHand px="20" py='8' ra="10" ba="solid 1px #AEAEAE"  mr="30" onClick={ this.onSbarshow.bind(this) }>
								{editstr}
							</CHand>
						</CHand>
					</CBetween>

 

					{/* 商品列表 */}
					<CColumn x="center" y="top" >

						{this.state.list.map((item, key) =>{
							return(
								<CHand ra='20' mx='20' mt='20' bg='#fff' pa='1'>
									<AtSwipeAction autoClose style='width:98%; margin:0 auto;' onClick={ this.deleteone.bind(this, item.collect_id) } options={[
										{
											text: '删除',
											style: {
											height:'270rpx',
											backgroundColor: '#FF4949'
											}
										},
									]}>

									<CItemX style="width:100%;border-radius:20rpx" py='20' ra='20'>
										{ this.state.selectbar ?  <Checkbox style="margin-top:100rpx; margin-left:50rpx;transform: scale(1.6,1.6);" checked={item.checked}  value={item.collect_id} onClick={ this.selectone.bind(this, key) } /> : <view></view> }
										<CImage w='200' h='200' pa='20' src={'http://image.cdn.hesq.com.cn/rushbuy/product/' + item.object.set_image_small} onClick={ this.onNavigate.bind(this, '/screen/product/detail?id=' + item.id) }></CImage>
										<CColumn ml="20" pr='10'>
											<CLine style="font-size:28rpx;">{item.set_name}</CLine>
											<CLine>
												<CText px="10" ra="20" size="24" color="#f00" bg="#FFE4E3" mt="10">促销价</CText>
											</CLine>
											<CLine>
												<CText mt="10" size="28" color='#434343' style='font-weight:bold'>￥{item.set_price}</CText>
												<CText mt="18" color="#A4A4A4" ml='10' style="text-decoration:line-through; text-decoration-color:#A4A4A4" size="24">￥{item.set_original_price}</CText>
											</CLine>

											<CLine>
												<CBetween mt="10">
													<CText color="#5f5f5f" size="24">销量{item.count_sale}</CText>
													<CSvg mr="20" w='50' h='50 ' icon={Icon.cart} onClick={ this.subCart.bind(this, item) }/>
												</CBetween>
											</CLine>
										</CColumn>
									</CItemX>


									</AtSwipeAction>
								</CHand>
							
							)


						})}
		

					</CColumn>
				</CContent>

				{/* Footer */}
				{btbar}

			</CPage>
		)
	}
}


